<template>
  <div class="coupongift_list">
    <Row type="flex" justify="space-between" class="coupongift_list-edit">
      <Form class="from" style="width: 100%" label-position="left" inline>
        <Row type="flex" justify="space-between">
          <Col span="22">
            <FormItem :label-width="72">
              <div slot="label" style="transform: translateX(12px);">商品名称：</div>
              <!-- v-filterinput="{reg: regExp.special}"   @on-keyup="filtterRefName"-->
              <Input
                v-filterinput="{ reg: regExp.special }"
                v-model="searchObj.refName"
                :maxlength="15"
                style="width:180px"
                autocomplete="off"
                placeholder="请输入"
              />
            </FormItem>

            <FormItem :label-width="48">
              <div slot="label" style="transform: translateX(12px);">状态：</div>
              <Select
                class="select-shop-item"
                @on-change="search"
                v-model="searchObj.status"
                :max-tag-count="1"
                style="width:180px"
              >
                <Option v-for="(item, index) in statusOption" :key="index" :value="item.value">{{ item.label }}</Option>
              </Select>
            </FormItem>
            <FormItem>
              <Button class="search-btn" type="primary" @click="search()">查询</Button>
            </FormItem>
            <FormItem>
              <Button class="search-btn" @click="reset">重置</Button>
            </FormItem>
          </Col>
          <Col span="2">
            <FormItem>
              <Button type="primary" @click="$router.push({ name: 'market_pointshop_goods_create' })">上架商品</Button>
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Row>

    <Table
      :max-height="resData.length > 10 ? 530 : 0"
      :loading="isloading"
      stripe
      :columns="columns"
      :data="resData"
      class="table-list"
    >
      <template slot-scope="{ row }" slot="action">
        <i class="iconsys icondetail" @click="handleDetail(row)" title="查看详情"></i>
        <i v-if="row.status === 0" @click="handleEdit(row)" class="iconsys iconedit" title="编辑"></i>
        <!-- <Poptip confirm title="你确定要删除吗？"> -->
        <i v-if="row.status === 0" @click="handleDelete(row)" class="iconsys icondel" title="删除"></i>
        <i
          :class="['iconshangjia', 'iconxiajia'][row.status]"
          class="iconsys"
          :title="['上架', '下架'][row.status]"
          @click="handleDel(row)"
        ></i>
        <!-- </Poptip> -->
      </template>
    </Table>
    <div class="page-box">
      <Page
        :total="total"
        ref="pages"
        :current.sync="searchObj.pageIndex"
        :page-size="searchObj.limit"
        @on-change="handlePage"
        @on-page-size-change="handlePageSize"
        show-sizer
        show-total
      />
    </div>
  </div>
</template>
<script>
import { getShopList, shopDown, pointDelete } from '@/api/market/pointshop'
import regExp from '@/libs/regExp'
export default {
  name: 'market_pointshop_goods_list',
  data () {
    return {
      searchObj: {
        merchantId: this.$store.state.user.merchantId,
        refName: '',
        status: -1,
        pageIndex: 1,
        limit: 10,
        offset: 0
      },
      regExp: regExp,
      isloading: false,
      total: 0,
      resData: [],
      statusOption: [
        { value: -1, label: '全部' },
        { value: 0, label: '已下架' },
        { value: 1, label: '已上架' }
      ],
      columns: [
        {
          title: '券类型',
          key: 'refType',
          align: 'center',
          render: (h, params) => {
            return h('span', ['代金券', '折扣券', '赠币券', '赠送积分', '手动录入商品'][params.row.refType])
          }
        },
        { title: '商品名称', key: 'refName', align: 'center' },
        { title: '兑换价(积分)', key: 'price', align: 'center' },
        {
          title: '状态',
          key: 'status',
          align: 'center',
          render: (h, params) => {
            return h('span', [' 已下架 ', '已上架'][params.row.status])
          }
        },
        {
          title: '所属模块',
          key: 'moduleType',
          align: 'center',
          render: (h, params) => {
            return h('span', [' hot专区', '积分兑好礼', '等级进阶礼'][params.row.moduleType])
          }
        },
        { title: '创建时间', key: 'createTime', align: 'center' },
        { title: '操作', slot: 'action', align: 'left', width: 185 }
      ]
    }
  },
  created () {
    this.getShopList()
  },
  activated () {
    this.getShopList()
  },
  methods: {
    handlePageSize (val) {
      this.searchObj.limit = val
      this.searchObj.offset = 0
      if (this.searchObj.pageIndex === 1) {
        this.getShopList()
      } else {
        this.searchObj.pageIndex = 1
      }
      // this.getShopList()
    },
    filtterRefName () {
      this.searchObj.refName = this.searchObj.refName.replace(this.regExp.special, '')
    },
    handlePage (val) {
      this.searchObj.offset = (val - 1) * this.searchObj.limit
      this.getShopList()
    },
    // 删除
    handleDelete (row) {
      this.$Modal.confirm({
        title: '提示',
        content: '确定要删除吗',
        onOk: () => {
          // this.$Message.info('Clicked ok');
          this.pointDelete(row.mallLayoutId)
        }
      })
    },
    // 商品上下架
    async handleDel (row) {
      if (row.status !== 0) {
        this.$Modal.confirm({
          title: '提示',
          content: '确定要下架吗',
          onOk: () => {
            // this.$Message.info('Clicked ok');
            api.call(this, row)
          }
        })
      } else {
        api.call(this, row)
      }
      async function api (row) {
        // const res = await obj[row.status](row.status === 0 ? row : { mallLayoutId: row.mallLayoutId })
        const res = await shopDown({ mallLayoutId: row.mallLayoutId, status: row.status === 0 ? 1 : 0 })
        if (res.data.status !== 200) return this.$Message.error(res.data.error)
        this.$Message.success(['上架成功', '下架成功'][row.status])
        this.getShopList()
      }
    },
    // 去详情页
    handleDetail (row) {
      this.$router.push({ name: 'market_pointshop_goods_detail', params: { id: row.mallLayoutId } })
    },
    // 编辑
    handleEdit (row) {
      this.$router.push({ name: 'market_pointshop_goods_edit', params: { id: row.mallLayoutId } })
    },
    async getShopList () {
      this.isloading = true
      const res = await getShopList({
        ...this.searchObj,
        status: this.searchObj.status === -1 ? '' : this.searchObj.status
      })
      this.isloading = false
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      this.resData = res.data.data || []
      this.total = res.data.totalCount
    },
    // 删除
    async pointDelete (mallLayoutId) {
      const res = await pointDelete({ mallLayoutId })
      if (res.data.status !== 200) return this.$Message.error(res.data.error)
      this.$Message.success('删除成功')
      this.getShopList()
    },
    search () {
      this.searchObj.offset = 0
      this.searchObj.pageIndex = 1
      this.getShopList()
    },
    reset () {
      this.searchObj = {
        merchantId: this.$store.state.user.merchantId,
        refName: '',
        status: -1,
        pageIndex: 1,
        limit: 10,
        offset: 0
      }
      this.getShopList()
    }
  }
}
</script>
<style lang="less" scoped>
.coupongift_list {
  // display: flex;
  // flex-direction: column;
  // min-height: 100%;
  // min-width: 1082px;
  // .from {
  //   margin-top: 24px;
  // }
  .coupongift_list-edit {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: -4px;
  }
  .button_active {
    border: 1px solid #2d8cf0;
  }
  .search-btn {
    width: 80px;
  }
}
</style>
